*{
    --etp: 50;
}

#fundo{
    width: 100%;
    height: 100%;
    position: absolute;
    --background-color: rgb(187, 221, 34);
    display: flex;
    margin-top: 0;
    margin-left: 0;
    padding: 0;
    align-items: start;
}

#fundo p{
    --background: blue;
    width: 10px;
    height: auto;
    margin: 0 auto;
    position: relative;
    color: lime; 
    font-family: "Courier";
    font-size: 1.1vw;
    word-wrap: break-word;
    padding: 0;
    overflow: hidden;
}

.m{
    animation: type2 3s steps(var(--etp), end) infinite;
}

.a{
    animation: type2 11s steps(var(--etp), end) infinite;
}

.t{
    animation: type2 10s steps(var(--etp), end) infinite;
}

.r{
    animation: type2 4s steps(var(--etp), end) infinite;
}

.i{
    animation: type2 6s steps(var(--etp), end) infinite;
}

.x{
    animation: type2 8s steps(var(--etp), end) infinite;
}

@keyframes type2{
    0%{height: 0%;}
    100%{height: 100%;}
} 

#inter{
    width: 100%;
    height: 100%;
    --background: lawngreen;
    position: absolute;
    margin: 0 auto;
    padding: 0;
    z-index: 2;
    overflow: hidden;
}

#cursor{
    position: relative;
    width: 10px;
    height: 10px;
    pointer-events: none;
    --display: grid;
}

#inter:hover #cursor{
    display: "";
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgb(0, 0, 0) 5%, rgba(0, 0, 0, 0.26) 50%, rgba(0, 0, 0, 0) 100%);
    position: fixed;
    padding: 0;
    z-index: -1;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

#frente{
    width: 100%;
    height: 100%;
    background: linear-gradient(0turn, #000000, #00000023, #00000000, #00000017,#000000f8);;
    position: absolute;
    margin: 0 auto;
    padding: 0;
    z-index: 2;
}